<template>
  <div class="det" v-if="detailData">
    <div class="header" unselectable="on">
      <div>
        <el-button type="info" size="mini" plain style="margin-top:11px" @click="goBack()">返回</el-button>
      </div>
    </div>
    <div class="head">
      <h1>{{detailData.title}}</h1>
      <div class="person">
        <div class="item">
          <span>发件人：</span>
          <el-tag size="mini">{{detailData.nick}}</el-tag>
        </div>
        <div class="item">
          <span>收件人：</span>
          <el-tag size="mini">{{detailData.toNick}}</el-tag>
        </div>
        <div class="item">
          <span>时&nbsp;&nbsp;&nbsp;间：</span>
          {{detailData.created}}
        </div>
      </div>
    </div>
    <div v-if="detailData.content" class="content ql-editor" v-html="detailData.content"></div>
    <div v-else class="content"><span style="color: #777;">暂无内容...</span></div>
  </div>
</template>

<script>
  import { mailDet, mailEdi } from '../../apis/api.js'
  export default {
    data() {
      return {
        detailData: null,
      }
    },
    methods: {
      getDet() {
        mailDet({
          id: this.$route.params.id
        }).then(res => {
          console.log(res)
          this.detailData = res;
          if(res.isRead == '1') {
            mailEdi({
              isRead: '2',
              mailId: this.$route.params.id,
              type: res.type
            }).then(res => {
              console.log(res)
              console.log('修改了')
            })
          }
        })
      },
      goBack() {
        this.$router.go(-1)
      }
    },
    mounted() {
      console.log(this.$route.params.id)
      this.getDet();
    },
  }
</script>

<style lang="css" scoped>
  .det {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    /* display: flex;
    flex-direction: column; */
    text-align: left;
  }
  .head {
    background: transparent;
    overflow:hidden;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 18px 8px;
  }
  .person .item {
    line-height: 26px;
    color: #848484;
  }
  .det h1 {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    outline: 0;
    padding-top: 6px;
    font-size: 15px;
    line-height: normal;
    margin-right: 12px;
    font-weight: 700;
  }
  .det .content {
    background: #fff;
    height: auto !important;
    padding: 12px;
    min-height: 80px;
  }
</style>